<template>
  <div class="edit-information">
    <div class="top">编辑资料</div>
    <div class="table">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名:">
          <el-input v-model="form.name" size="medium" style="width: 300px" />
        </el-form-item>
        <el-form-item label="头像:">
          <el-upload
            action="http://ddsc.izhixiu.cn/api/common/upload"
            list-type="picture-card"
            :file-list="coverFileList"
            :on-success="hanldeCoverSuccess"
            :limit="1"
            name="photo"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
          >
            <i class="el-icon-plus" />
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt>
          </el-dialog>
        </el-form-item>
        <el-form-item label="公司名称:">
          <el-input v-model="form.company_name" size="medium" style="width: 300px" />
        </el-form-item>
        <el-form-item label="公司电话:">
          <el-input v-model="form.company_tel" size="medium" style="width: 300px" />
        </el-form-item>
        <el-form-item label="手机号:">
          <el-input v-model="form.phone" size="medium" style="width: 300px" />
        </el-form-item>
        <el-form-item label="设计类型:">
          <el-select v-model="value1" placeholder="请选择" @change="checkType">
            <el-option
              v-for="item in options4"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="从业年限:">
          <el-select v-model="form.work_age" placeholder="请选择">
            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="擅长风格:" prop="checkedStyle">
          <el-checkbox-group v-model="checkedStyle" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="item in options2" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="设计收费:">
          <el-select v-model="value2" placeholder="请选择" @change="checkMoney">
            <el-option v-for="item in options3" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div class="save">
      <button class="submit" @click="save('form')">保存</button>
    </div>
  </div>
</template>
<script>
import { editDesignerVal, getDesignerConfig } from '@/api/http/designer'
export default {
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: '',
      form: {},
      checkedStyle: [],
      coverFileList: [],
      options: [
        {
          value: '1',
          label: '1年'
        },
        {
          value: '2',
          label: '2年'
        },
        {
          value: '3',
          label: '3年'
        },
        {
          value: '4',
          label: '4年'
        },
        {
          value: '5',
          label: '5年'
        },
        {
          value: '6',
          label: '6年'
        },
        {
          value: '7',
          label: '7年'
        },
        {
          value: '8',
          label: '8年'
        },
        {
          value: '9',
          label: '9年'
        },

        {
          value: '11',
          label: '10年以上'
        }
      ],
      options4: [
        {
          value: 1,
          label: '整装'
        },
        {
          value: 2,
          label: '软装'
        }
      ],
      options3: [],
      options2: [],
      value: '',
      value1: '',
      value2: ''
    }
  },
  created() {
    if (this.$route.query.designerId) {
      this.designerId = this.$route.query.designerId
    }
    this.getDesignerConfig()
    if (JSON.parse(window.localStorage.getItem('designerVal'))) {
      this.form = JSON.parse(window.localStorage.getItem('designerVal'))
      this.value1 = this.form.form
      this.value2 = this.form.rates / 1
      this.coverFileList.push({
        name: 'file',
        url: this.form.avatar
      })
      this.checkedStyle = this.form.styles.split(',')
      var arr = []
      this.checkedStyle.map(res => {
        res = parseInt(res)
        arr.push(res)
      })
      this.checkedStyle = arr
      console.log(this.form, '---00')
    }
  },
  methods: {
    handleCheckedCitiesChange() {
      console.log(this.checkedStyle, '---this.checkedStyle--点击选择')
    },
    // 设计收费选择
    checkMoney() {
      console.log(this.value2, '----value2')
    },
    // 选择设计师擅长风格
    changeType(item) {
      console.log(item, '---item')
      item.isCheck = !item.isCheck
      var checkItem = this.options2.filter(res => {
        return res.isCheck == true
      })
      console.log(checkItem, '---99')
    },
    checkType() {
      console.log(this.value1, '---value1')
    },
    getDesignerConfig() {
      getDesignerConfig().then(res => {
        if (res.code == 200) {
          this.options = res.data.work_age
          this.options2 = res.data.styles
          this.$forceUpdate()
          this.options3 = res.data.rate
        }
      })
    },
    hanldeCoverSuccess(response, file, fileList) {
      console.log(response.code, '--response.code')
      if (response.code === 200) {
        this.form.avatar = response.data.photo
        console.log(this.form.avatar, '---avatar')
      }
    },
    // 编辑资料
    save() {
      if (!this.form.name) {
        this.$message('请填写姓名')
        return
      }
      if (!this.form.company_name) {
        this.$message('请填写公司名称')
        return
      }
      if (!this.form.avatar) {
        this.$message('请上传头像')
        return
      }
      if (!this.form.company_tel) {
        this.$message('请填写公司电话')
        return
      }
      // if (!this.form.phone) {
      //   this.$message("请填写手机号");
      //   return;
      // }
      const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
      if (this.form.phone && reg.test(this.form.phone)) {
      } else if(this.form.phone && !reg.test(this.form.phone)){
        this.$message('请输入正确的手机号格式')
        return
      }
      if (!this.value1) {
        this.$message('请选择设计类型')
        return
      }
      if (!this.form.work_age) {
        this.$message('请选择从业年限')
        return
      }
      if (!this.checkedStyle) {
        this.$message('请选择擅长风格')
        return
      }
      if (!this.value2) {
        this.$message('请选择设计收费')
        return
      }
      var params = {
        id: this.designerId,
        name: this.form.name,
        phone: this.form.phone,
        company_tel: this.form.company_tel,
        company_name: this.form.company_name,
        avatar: this.form.avatar,
        work_age: this.form.work_age,
        styles: this.checkedStyle.join(','),
        rates: this.value2,
        form: this.value1
      }
      editDesignerVal(params).then(res => {
        if (res.code == 200) {
          this.$message.success('编辑成功')
          this.$router.go(-1)
        }
      })
      console.log(params, '---params')
    },
    handlePictureCardPreview() {},
    handleRemove() {
      this.form.cover = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.top {
  line-height: 40px;
  color: rgba(68, 68, 68, 1);
  font-size: 18px;
  text-align: left;
  font-family: Roboto;
  font-weight: bold;
}
.save {
  .submit {
    display: block;
    margin: 0 auto;
    width: 200px;
    line-height: 48px;
    border-radius: 6px;
    background-color: rgba(43, 51, 62, 1);
    text-align: center;
    font-size: 16px;
    color: #fff;
    border: none;
    outline: none;
  }
}

</style>
